<template>
  <div >
    <div>
      <div class="font15 mt10 pl10">
      <span class="titletext ">{{titledata.title}}</span>
      <div class="graytext  mt10 font13">
        <span >工单编号：</span>
        <span class="titletext">{{titledata.pmInsId}}</span>
      </div>
    </div>
    <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
      <div class="blue_item" />
      <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">项目信息</span>
    </div>
    <!-- 基本信息 -->
      <van-field readonly name="city" :value="fromdata.city" label="地市：" label-width="3em" />
      <van-field readonly name="counties" :value="fromdata.counties" label="县区：" label-width="3em" />
      <van-field readonly name="customerName" :value="fromdata.customerName" label="集团单位名称：" label-width="7em" />
      <van-field readonly name="customerCode" :value="fromdata.customerCode" label="集团单位编码：" label-width="7em" />
      <van-field readonly name="businessId" :value="fromdata.businessId" label="商机编码：" label-width="5em" />
      <van-field readonly required name="projectID" :value="fromdata.projectID" label="项目编码：" label-width="5em" />
      <van-field readonly name="splitBusinessTypes" :value="fromdata.splitBusinessTypes" label="ICT业务大类：" label-width="7.25em" />
      <van-field readonly name="minSignedDate" :value="fromdata.minSignedDate" label="首次合同签订日期(收入)：" label-width="12em" />
      <van-field readonly name="createDate" :value="fromdata.createDate" label="商机录入日期：" label-width="7em" />
      <van-field readonly required name="competeType" :value="fromdata.competeType" label="项目竞争方式：" label-width="7em" />
      <van-field readonly name="busEntryDays" :value="fromdata.busEntryDays" label="商机录入提前量（天数）：" label-width="12em" />
      <van-field readonly name="isEffective" :value="fromdata.isEffective=='1'?'是':'否'" label="是否有效商机：" label-width="7em" />
      <van-field readonly name="phaseName" :value="fromdata.phaseName" label="阶段名称：" label-width="5em" />
      <van-field readonly name="linkName" :value="fromdata.linkName" label="环节名称：" label-width="5em" />
      <van-field readonly name="startTime" :value="fromdata.startTime" label="环节开始时间：" label-width="7em" />
      <van-field readonly name="endTime" :value="fromdata.endTime" label="环节结束时间：" label-width="7em" />
      <van-field readonly name="createdTime" :value="fromdata.createdTime" label="申请发起时间：" label-width="7em" />
      <van-field readonly autosize type="textarea" rows="1" name="linkDesc" :value="fromdata.linkDesc" label="环节描述：" label-width="5em" />
      <div class="mt10" style=" display: flex;border-bottom: 1px solid #ebedf0;">
        <div class="blue_item" />
        <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">审批信息</span>
      </div>
      <van-field required v-if="showcChengbanView == true||fromdata.results" readonly autosize type="textarea" rows="1" name="results" v-model="fromdata.results" :value="fromdata.results" label="审核意见：" label-width="5em" :right-icon="showcChengbanView&&todotype==true? 'arrow' : ''" @click="showcChengbanView&&todotype==true?showChengbanPick=true:null"/>
      <van-popup v-model="showChengbanPick" position="bottom" get-container="body">
        <van-picker show-toolbar :columns="showChengbanPickcolumns" @confirm="showChengbanPickonConfirm" @cancel="showChengbanPick = false" />
      </van-popup>
      <van-field required v-if="showcChengbanView == true||(fromdata.results&&fromdata.results=='未通过')" :readonly="!showcChengbanView&&todotype!=true" autosize type="textarea" rows="1" name="reasonsNo" v-model="fromdata.reasonsNo" :value="fromdata.reasonsNo" label="未通过评审原因：" label-width="8em" :right-icon="showcChengbanView&&todotype==true? 'arrow' : ''"/>
      <historyAndSuggs id='target' :showHistory='showHistory' :historydata='historydata' :approveList='approveList' />
    </div>
  </div>
</template>
 
<script>
import historyAndSuggs from "@/views/srqr/historyAndSuggs.vue";
export default {
  data() {
    return {
      showChengbanPick:false,
      showChengbanPickcolumns:['通过','未通过'],
    }
  },
  props: ['titledata','businessdata','fromdata','showHistory','historydata','approveList','todotype','showcChengbanView'],
  watch: {
    fromdata: {
      handler() { //这是vue的规定写法，当你watch的值发生变化的时候，就会触发这个handler，这是vue内部帮你做的事情
        this.$emit('freshData',this.fromdata)
      },
      deep: true,  // 可以深度检测到 obj 对象的属性值的变化
      immediate: true //刷新加载  立马触发一次handler
    },
  },
  methods: {
     tomsg () {
      document.getElementById('target').scrollIntoView({ behavior: 'smooth' })
    },
    showChengbanPickonConfirm(value){
      this.fromdata.results=value;
      this.showChengbanPick=false
    }
  },
  components: {
    historyAndSuggs
  },
}
</script>
 
<style>
.tables.el-table .cell {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 15px;
    padding-left: 5px;
    padding-right: 5px;
}
</style>